<template>
	<view class="home__container">
		<!-- 我的页面信息 -->
		<view class="home__container__info u-f-juc u-f-ac">
			<!-- 登录之前 -->
			<template v-if="!isLogin">
				<text class="home__container__info--title">登录仿糗事百科,体验更多功能</text>
				<!-- 第三方 -->
				<thirdPartyLogin/>
				<view class="home__container__info__login u-f-ac" @tap="sendLogin">
					<text>账号密码登录</text>
					<text class="icon iconfont icon-arrow-down-s-line"></text>
				</view>
			</template>
			<!-- 登录之后 -->
			<template v-else>
				<homeUserInfo :item="homeInfo"/>
			</template>
			<!-- 动态 -->
			<view class="home__container__info__footer u-f-ac">
				<homeItem  v-for="item,index in homedate" :key="index" :item="item"/>
			</view>
		</view>
		
		<!-- 公告 -->
		<image src="../../static/new.jpg" mode="scaleToFill" class="home__container__branner"/>
		
		<!-- 选项 -->
		<homeMenu title="浏览记录">
			<text class="icon iconfont icon-icon-" 
			style="font-size: 50upx;"></text>
		</homeMenu>
		<homeMenu title="糗百认证">
			<text class="icon iconfont icon-huiyuanvip" 
			style="font-size: 50upx;color: #ff8828;"></text>
		</homeMenu>
		<homeMenu title="审核糗事">
			<text class="icon iconfont icon-icon_im_keyboard" 
			style="font-size: 50upx;"></text>
		</homeMenu>
		
	</view>
</template>

<script setup>
	import {onNavigationBarButtonTap,onShow} from '@dcloudio/uni-app';
	import homeMenu from '../../component/home/home-menu.vue';
	import homeUserInfo from '../../component/home/home-user-info.vue';
	import homeItem from '../../component/home/home-item.vue';
	import thirdPartyLogin from '../../component/common/third-party-login.vue'
	import {reactive, ref} from 'vue';
	import {getUserInfo} from '../../api/user.js';
	import user from '../../common/user.js'
	
	// 是否登录
	const isLogin = ref(user.token);
	
	// 用户信息
	const homeInfo = reactive({
		userpic:"../../static/new.jpg",
		username:"昵称",
		totalnum:10,
		todaynum:2,
	})
	
	const homedate = ref([
		{name:"糗事",num:100},
		{name:"动态",num:10},
		{name:"评论",num:20},
		{name:"收藏",num:50}
	])
	
	// 跳转到登录页面
	function sendLogin(){
		uni.navigateTo({
			url:"/pages/login/login",
		})
	}
	onShow(()=>{
		isLogin.value=user.token;
		if(!!isLogin.value){
			getUserInfo().then(res=>{
				console.log(res)
				homeInfo.userpic=res.userpic;
				homeInfo.username = res.username;
			})
		}
	})
	onNavigationBarButtonTap((e)=>{
		console.log(e.index)
		if(e.index==0){
			user.navigate({
				url:"/pages/user-set/user-set"
			})
		}
	})
	
</script>

<style scoped lang="scss">
.home__container {
	padding: 10upx 30upx;
	&__info{
		flex-direction: column;
		&--title {
			font-size: 28upx;
			margin: 10upx 0;
		}
		
		&__login {
			margin: 10upx 0;
			>text:first-of-type {
				font-size: 30upx;
			}
			>text:last-of-type{
				display: inline-block;
				transform: rotate(-90deg);
				font-size: 40upx;
				color: #ccc;
			}
		}
		&__footer {
			justify-content: space-around;
			width: 100%;
			margin: 20upx 0;
			
		}
		
	}

	&__branner {
		width: 100%;
		margin: 20upx 0;
		border-radius: 16upx;
		height: 200upx;
	}
}


</style>
